<template>
	<view class="page-wrap">
		<navBar></navBar>
		<match-media :max-width="MAX_SIZEiZE - 1">
			<uni-nav-bar fixed statusBar :backgroundColor="`var(--bg-27)`" :border="false" @clickLeft="clickLeft">
				<text class="page-title">{{ $t('Page.mine.wdtd') }}</text>
				<view class="left-icon" slot="left"> </view>
				<image style="width: 22px;height: 22px;" mode="aspectFit" slot="right"
					:src="`/static/image/Mine/detail-${theme}.png`" @click="toDetail(0)">
				</image>
			</uni-nav-bar>
		</match-media>
		<view class="content">
			<match-media :min-width="MAX_SIZEiZE">
				<view class="pc-back">
					<view class="back-cont" @click.prevent="clickLeft">
						<view class="back-icon"> </view>
						<view class="back-text"> {{ $t('Page.notify.back') }} </view>
					</view>
					<text class="page-title">{{ $t('Page.mine.wdtd') }}</text>
					<view class="entry-detail" @click.prevent="toDetail(0)">
						<image class="detail-icon" :src="`/static/image/Mine/detail-${theme}.png`" mode="aspectFit">
						</image>
						<text>{{ $t('Page.mine.tdxq') }} ></text>
					</view>
				</view>
			</match-media>
			<view class="tab_box">
				<view class="tab-cont">
					<view :class="['tab-item', { 'active': curTabIndex == index }]" v-for="(item, index) in tabsList"
						@click="handleTabs(item, index)" :key="'gamecate' + index">
						<text class="tab_text">{{ item.name.toUpperCase() }}</text>
					</view>
				</view>
				<match-media :min-width="MAX_SIZEiZE">
					<view class="range-wrap">
						<view class="time" @click="openCalender">
							{{ startTime ? startTime : $t('Page.mine.kssj') }}
						</view>
						<view class="line"></view>
						<view class="time" @click="openCalender">
							{{ endTime ? endTime : $t('Page.mine.jssj') }}
						</view>
					</view>
				</match-media>
			</view>
			<match-media :max-width="MAX_SIZEiZE - 1">
				<view class="range-wrap">
					<view class="time" @click="openPicker('start')">
						<picker mode="date" :value="startTime" :start="startDate" :end="endDate"
							@change="bindDateChange">
							<view class="uni-input"> {{ startTime ? startTime : $t('Page.mine.kssj') }}</view>
						</picker>
					</view>
					<view class="line"></view>
					<view class="time" @click="openPicker('end')">
						<picker mode="date" :value="endTime" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{ endTime ? endTime : $t('Page.mine.jssj') }}</view>
						</picker>
					</view>
				</view>
			</match-media>
			<view class="card-wrap" v-if="teamInfo">
				<view class="card" @click="toDetail(0)">
					<view class="top">
						{{ $t('Page.mine.all') }}
					</view>
					<view class="center">
						<view class="center-item">
							<view>
								{{ $t('Page.mine.syrs') }}
							</view>
							<view>
								{{ teamInfo.total.usernum }}
							</view>
						</view>
						<view class="center-item">
							<view>
								{{ $t('Page.mine.yxcz') }}
							</view>
							<view>
								R$ {{ teamInfo.total.charge }}
							</view>
						</view>
					</view>
					<view class="bottom">
						<view>
							{{ $t('Page.mine.syyj') }}：R$ {{ teamInfo.total.backbonus }}
						</view>
						<view>
							{{ $t('Page.mine.czrs') }}：{{ teamInfo.total.chargenum }}
						</view>
					</view>
				</view>
				<view class="card" @click="toDetail(1)">
					<view class="top">
						{{ $t('Page.mine.zsfl') }}
					</view>
					<view class="center">
						<view class="center-item">
							<view>
								{{ $t('Page.mine.syrs') }}
							</view>
							<view>
								{{ teamInfo.zhishu.usernum }}
							</view>
						</view>
						<view class="center-item">
							<view>
								{{ $t('Page.mine.yxcz') }}
							</view>
							<view>
								R$ {{ teamInfo.zhishu.charge }}
							</view>
						</view>
					</view>
					<view class="bottom">
						<view>
							{{ $t('Page.mine.syyj') }}：R$ {{ teamInfo.zhishu.backbonus }}
						</view>
						<view>
							{{ $t('Page.mine.czrs') }}：{{ teamInfo.zhishu.chargenum }}
						</view>
					</view>
				</view>
				<view class="card" @click="toDetail(2)">
					<view class="top">
						{{ $t('Page.mine.ejfl') }}
					</view>
					<view class="center">
						<view class="center-item">
							<view>
								{{ $t('Page.mine.syrs') }}
							</view>
							<view>
								{{ teamInfo.erji.usernum }}
							</view>
						</view>
						<view class="center-item">
							<view>
								{{ $t('Page.mine.yxcz') }}
							</view>
							<view>
								R$ {{ teamInfo.erji.charge }}
							</view>
						</view>
					</view>
					<view class="bottom">
						<view>
							{{ $t('Page.mine.syyj') }}：R$ {{ teamInfo.erji.backbonus }}
						</view>
						<view>
							{{ $t('Page.mine.czrs') }}：{{ teamInfo.erji.chargenum }}
						</view>
					</view>
				</view>
				<view class="card" @click="toDetail(3)">
					<view class="top">
						{{ $t('Page.mine.sjfl') }}
					</view>
					<view class="center">
						<view class="center-item">
							<view>
								{{ $t('Page.mine.syrs') }}
							</view>
							<view>
								{{ teamInfo.sanji.usernum }}
							</view>
						</view>
						<view class="center-item">
							<view>
								{{ $t('Page.mine.yxcz') }}
							</view>
							<view>
								R${{ teamInfo.sanji.charge }}
							</view>
						</view>
					</view>
					<view class="bottom">
						<view>
							{{ $t('Page.mine.syyj') }}：R$ {{ teamInfo.sanji.backbonus }}
						</view>
						<view>
							{{ $t('Page.mine.czrs') }}：{{ teamInfo.sanji.chargenum }}
						</view>
					</view>
				</view>
			</view>

			<!-- PC端选择日期弹框组件 -->
			<uni-transition ref="ani" custom-class="transition" mode-class="fade" :show="showSelectDate"
				:duration="500">
				<uni-popup ref="calendar" type="center" :is-mask-click="true">
					<view class="popup-cont">
						<view class="calendar-cont">
							<miku-calendar
								:dateRange="[(new Date().getTime()- 24 * 60 * 60 * 1000),new Date().getTime()]"
								mode='dateRange' showArrow themeColor="#242a32" @confirm="calendarConfirm"
								v-if="showSelectDate" class="calendar"></miku-calendar>
						</view>
						<image class="close-icon" src="../../static/image/close.png" @click="closeCalendar">
						</image>
					</view>
				</uni-popup>
			</uni-transition>
		</view>
	</view>
</template>
<script>
	import mikuCalendar from "@/components/miku-calendar/mikuCalendar.vue"
	import {
		mapState
	} from 'vuex'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	export default {
		components: {
			mikuCalendar
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				MAX_SIZEiZE,
				tabsList: [{
						name: this.$t('Page.mine.all')
					}, {
						name: this.$t('Page.mine.jt')
					},
					{
						name: this.$t('Page.mine.zt')
					},
					{
						name: this.$t('Page.mine.week')
					}
				],
				curTabIndex: 0, //当前显示的tabItem
				show: false,
				type: 'start',
				preDay: Number(new Date()) - 24 * 60 * 60 * 1000,
				nextDay: Number(new Date()) + 24 * 60 * 60 * 1000,
				week: Number(new Date()) - 7 * 24 * 60 * 60 * 1000,
				teamInfo: {
					total: {},
					zhishu: {},
					erji: {},
					sanji: {}
				},
				showSelectDate: false,
				startTime: '',
				endTime: '',
			}
		},
		computed: {
			...mapState({
				theme: state => state.app.theme,
			}),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.getTeamInfo()
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 5;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			openCalender() {
				this.$refs.calendar.open('center')
				this.showSelectDate = true
			},

			// 关闭日历
			closeCalendar() {
				this.$refs.calendar.close('center');
				this.showSelectDate = false;
			},
			calendarConfirm(e) {
				let arr = e.map(v => {
					return v.split(" ")[0]
				})
				this.date = arr.join("--")
				this.showSelectDate = false
				this.startTime = arr[0].replaceAll('/', '-')
				this.endTime = arr[1].replaceAll('/', '-')
				this.getTeamInfo()
			},
			getTeamInfo() {
				const {
					TEAM
				} = this.$api
				sendMessage({
					flag: TEAM,
					content: {
						starttime: this.startTime,
						endtime: this.endTime
					}
				})
				uni.$once(TEAM, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.teamInfo = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			toDetail(index) {
				console.log("336index: ", index);
				uni.navigateTo({
					url: `/pages/Mine/teamDet?index=${index}`
				})
			},
			// Tabs栏点击
			handleTabs(item, index) {
				this.curTabIndex = index
				switch (this.curTabIndex) {
					case 0:
						this.startTime = this.endTime = ''
						break;
					case 1:
						this.startTime = this.endTime = this.$tools.timeFormat(new Date(), 'yyyy-mm-dd');
						break;
					case 2:
						this.startTime = this.endTime = this.$tools.timeFormat(this.preDay, 'yyyy-mm-dd');
						break;
					case 3:
						this.startTime = this.$tools.timeFormat(this.week, 'yyyy-mm-dd')
						this.endTime = this.$tools.timeFormat(new Date(), 'yyyy-mm-dd');
						break;
					default:
						break;
				}
				this.getTeamInfo()
			},
			openPicker(type) {
				this.type = type
			},

			// 获取日期的时间戳
			getTimeStamp(date) {
				const timeStamp = new Date(date);
				return timeStamp.getTime();
			},
			bindDateChange(e) {
				const time = e.detail.value
				// 选择器数据回显
				if (this.type == 'start') {
					this.startTime = time
				} else if (this.type == 'end') {
					this.endTime = time
				}
				if (this.startTime && this.endTime) {
					if (this.getTimeStamp(this.startTime) > this.getTimeStamp(this.endTime)) {
						const temp = this.startTime;
						this.startTime = this.endTime;
						this.endTime = temp;
					}
				}
				this.startTime && this.endTime && this.getTeamInfo()
			},
			clickLeft() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					// #ifdef H5
					history.back();
					// #endif
					// #ifdef APP-PLUS
					uni.switchTab({
						url: '/pages/tabBar/mine/index'
					})
					// #endif
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	// 默认样式 结构   
	.page-wrap {
		min-height: 100vh;
		background: var(--bg-3);

		.page-title {
			width: 100%;
			margin: auto;
			height: 44px;
			line-height: 44px;
			font-size: 20px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
		}

		.left-icon {
			width: 22px;
			height: 22px;
			background: url('@/static/image/back-icon.png') no-repeat;
			background-size: contain;
		}

		.right-icon {
			width: 22px;
			height: 22px;
		}

		.content {
			width: 100%;
			min-height: calc(100vh - 50px);
			padding: 0 15px 15px;
			background: var(--bg-3);
			box-sizing: border-box;

			.tab_box {
				width: 100%;
				height: 40px;
				display: flex;
				align-items: center;

				.tab-cont {
					width: 100%;
					height: 40px;
					display: flex;
					align-items: center;

					.tab-item {
						flex: 1;
						text-align: center;
						line-height: 40px;
						margin-right: 33px;
						font-size: 14px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						cursor: pointer;
						color: rgba(255, 255, 255, 0.40);
						line-height: 18px;
						box-sizing: border-box;

						&:last-child {
							margin-right: 0;
						}

						.tab_text {
							margin-left: 5px;
							font-size: 28rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}

			.range-wrap {
				width: 100%;
				height: 55px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				position: relative;

				.time {
					flex: 1;
					position: relative;
					font-size: 14px;
					font-family: PingFang SC-Medium, PingFang SC;
					color: #FFFFFF;
					height: 35px;
					line-height: 35px;
					text-align: center;
					background: var(--bg-48);
					border-radius: 20px;
					cursor: pointer;

					&::after {
						content: '';
						position: absolute;
						right: 22px;
						top: 50%;
						transform: translateY(-50%);
						width: 0;
						height: 0;
						border: 8rpx solid transparent;
						border-top-color: #FFFFFF;
					}

					&/deep/.uni-input {
						height: 35px;
						line-height: 35px;
						border-radius: 15px;
						background: transparent;
						padding: 0;

					}
				}

				.line {
					width: 20px;
					height: 2px;
					background: var(--bg-36);
					border-radius: 200rpx;
					margin: 0 15px;
				}

			}


			.card-wrap {
				width: 100%;
				display: flex;
				flex-direction: column;
				margin-top: 10px;

				.card {
					display: flex;
					flex-direction: column;
					background-color: var(--bg-19);
					border-radius: 15px;
					font-size: 13px;
					margin-bottom: 10px;
					padding: 10px 15px;
					cursor: pointer;
					box-sizing: border-box;

					.top {
						height: 22px;
						line-height: 22px;
						font-size: 15px;
						text-align: center;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}

					.center {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 55px;
						margin-top: 15px;


						.center-item {
							flex: 1;
							background: var(--bg-49);
							border-radius: 10px;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							margin-right: 10px;
							padding: 10px 0;

							&:last-child {
								margin-right: 0;
							}

							view:first-child {
								color: rgba(255, 255, 255, 0.90);
								text-align: center;
							}

							view:nth-child(2) {
								font-size: 28rpx;
								color: var(--color-37);
							}
						}
					}

					.bottom {
						display: flex;
						flex-direction: column;
						box-sizing: border-box;
						margin-top: 20px;

						view {
							height: 22px;
							line-height: 22px;
							font-size: 13px;
							color: rgba(255, 255, 255, 0.90);
						}
					}
				}
			}
		}
	}

	// PC
	@media screen and (max-width: 768px) {
		.active {
			color: #fff !important;
			-webkit-background-clip: text;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				bottom: -8px;
				left: 50%;
				transform: translateX(-50%);
				width: 8px;
				height: 4px;
				background: var(--bg-50);
				border-radius: 20px;
				opacity: 1;
			}
		}
	}

	@media screen and (min-width: 768px) {
		.page-wrap {
			padding-top: 70px;

			.pc-back {
				width: 100%;
				padding: 0 30px;
				height: 60px;
				display: flex;
				align-items: center;
				background: var(--bg-24);
				border-radius: 30px;
				margin: 10px auto 0;
				box-sizing: border-box;

				.back-cont {
					display: flex;
					align-items: center;
					height: 30px;
					padding: 0 10px;
					border-radius: 100px;
					background: var(--bg-25);
					cursor: pointer;

					.back-icon {
						width: 13px;
						height: 11px;
						background: url('@/static/image/back-icon.png') no-repeat;
						background-size: contain;
					}

					.back-text {
						font-size: 13px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 18px;
						margin-left: 5px;
					}
				}

				.page-title {
					width: fit-content !important;
					margin-left: 15px;
				}

				.entry-detail {
					margin-left: auto;
					height: 30px;
					display: flex;
					align-items: center;
					padding: 0 10px;
					border-radius: 100px;
					background: var(--bg-25);
					font-size: 13px;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					cursor: pointer;

					.detail-icon {
						width: 14px;
						height: 16px;
						margin-right: 5px;
					}
				}
			}

			.content {
				width: 100%;
				min-height: calc(100vh - 70px) !important;
				height: calc(100vh - 70px) !important;
				overflow-y: auto;
				background: var(--bg-3);
				padding: 0 30px 30px;
				box-sizing: border-box;

				.tab_box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 30px 0;

					.tab-cont {
						display: flex;
						justify-content: flex-start !important;
						margin-right: 15px;
						height: 50px;

						.tab-item {
							flex: 0;
							width: fit-content;
							padding: 0 15px;
							height: 35px;
							line-height: 35px;
							color: var(--color-8);
							background: var(--bg-11);
							border: 1px solid transparent;
							border-radius: 100px;
							margin-right: 15px;
							box-sizing: border-box;

							&:last-child {
								margin-right: 0;
							}


							&:hover {
								border-color: var(--color-1);
							}
						}

						.active {
							position: relative;
							color: var(--color-28);
							background: var(--color-1);

							&::before {
								opacity: 0 !important;
							}
						}
					}

					.range-wrap {
						width: 350px;
						box-sizing: border-box;
					}
				}

				.card-wrap {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
					// grid-template-columns: 1fr 1fr 1fr;
					/* 三列等宽 */
					gap: 30px;
					margin-top: 50px;
				}
			}
		}
	}

	/deep/.calendar-area {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.popup-cont {
		width: 30rem;
		max-width: calc(100vw - 30px);
		border-radius: 15px;
		opacity: 0.95;
		display: flex;
		align-items: center;
		flex-direction: column;
		z-index: 999;
		position: relative;
		box-sizing: border-box;

		.calendar-cont {
			height: 23rem;
		}

		.close-icon {
			width: 30px;
			height: 30px;
			z-index: 999;
			position: absolute;
			bottom: -45px;
			left: 50%;
			transform: translateX(-50%);
			cursor: pointer;
		}
	}
</style>